iT邦幫忙

2021 iThome 鐵人賽

DAY 17
0

今天我們要介紹的是CSS重要屬性position,在排版中我們會遇到許多不同的情況,而利用position可以幫助我們解決這些問題。接下來就讓我們了解position可以設定哪些屬性吧!

position: static | relative | fixed | absolute

position: static; 預設

當div方框設定成static時。代表是預設值,會造著瀏覽器的配置自動排版在網頁上,所以top、bottom、left、right 設定沒有意義。

<style>
       .static{
           border: 5px solid blue;
           width: auto;
           height: 200px;
       }
</style>
<body>
    <div class="static">
        <p>預設值,設定top、left、button、right都沒有用</p> 
    </div>
</body>

position: relative; 相對位置

當div方框設定成relative時,如果沒有添加top、left、button、right等其他屬性時,就會像static一樣在原本的瀏覽器設置的位置,不過設定了以後就可以從原本的位置做移動調整。基準是以原本設定的位置。

.static{
    position: static;
    border: 5px solid blue;
    width: 800px;
    height: 100px;
}

.relative{
    position: relative;
    border: 5px solid yellow;
    width: 500px;
    height: 200px;
}
<body>
    <div class="static">
        <p style="font-size: 20px;">預設值,設定top、left、button、right都沒有用</p> 
    </div>
    <div class="relative">
        <p>相對位置</p>
    </div>
</body>

這是還沒有設定top、left、button、right時,就在預設的位置。

而在.relative內加上top跟left的位移後,就會從原本位置移動到相對位置。

       .relative{
           position: relative;
           border: 5px solid yellow;
           width: 500px;
           height: 200px;
           top: 20px;
           left: 100px;
       }

position:fixed; 固定定位

固定定位會將div方框固定在瀏覽器視窗的位置,不論頁面怎麼滾動,他都還是會在同個位置,頁面下拉時也不會消失。且不受其他定位的影響。

       .static{
           position: static;
           border: 5px solid blue;
           width: 800px;
           height: 100px;
       }

       .relative{
           position: relative;
           border: 5px solid yellow;
           width: 500px;
           height: 200px;
           top: 20px;
           left: 100px;
       }

       .fixed{
           position: fixed;
           width: 300px;
           height: 150px;
           border: 5px solid  violet ;
           top: 0;
           right: 0;
       }
    <body>
        <div class="static">
            <p style="font-size: 20px;">預設值,設定top、left、button、right都沒有用</p> 
        </div>
        <div class="relative">
            <p>相對位置</p>
        </div>
        <div class="fixed">
            <p>固定位置</p> 
        </div>
    </body>

position:absolute; 絕對位置

絕對位置absolute需要有relative來搭配,可以想像需要有個爸爸(relative)包住兒子(absolute),若是外層沒有包住的話,就會以body為基準調整定位,而一開始都是定位在左上角。不太理解的話讓我們看看下面這張圖。

.static{
           position: static;
           border: 5px solid blue;
           width: 800px;
           height: 100px;
       }

       .relative{
           position: relative;
           border: 5px solid yellow;
           width: 500px;
           height: 200px;
           left: 100px;
       }

       .fixed{
           position: fixed;
           width: 300px;
           height: 150px;
           border: 5px solid  violet ;
           right: 0;
           top: 0;
       }

       .absolute{
           position: absolute;
           border: 5px solid green;
           width: 50px;
           height: 50px;
           top: 20px;
              
       }

       .test{
           position: relative;
           width: 300px;
           height: 200px;
           border: 5px solid grey;
       }
    <body>
        <div class="static">
            <p style="font-size: 20px;">預設值,設定top、left、button、right都沒有用</p> 
        </div>
        <div class="relative">
            <p>相對位置</p>
        </div>
        <div class="fixed">
            <p>固定位置</p> 
        </div>
        <div class="test">
            <div class="absolute">
            <p>絕對位置</p>
            </div>
        </div>
        
    </body>


絕對定位會定位在相對定位的左上角,而也可以調整他的位置。

       .absolute{
           position: absolute;
           border: 5px solid green;
           width: 50px;
           height: 50px;
           top: 40px;
           left: 20px;  
       }

在absolute裡加上top: 40px; left: 20px;

就會以爸爸(relative)為基準點(左上角)去做移動。

今天的介紹就到這了,對CSS的排版位置理解了嗎!


上一篇
Day16 CSS排版之神flex
下一篇
Day18 CSS網頁開始寫前的準備
系列文
我的網頁前端小小小教室30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言